<template>
  <div class="modal-card">
    <div class="zl-page-loading" v-if="loading">
      <Spin fix></Spin>
    </div>
    <div class="access-box" v-else>
      <h4 class="zl-title">访问权详情</h4>
      <div class="modal-item panel">
        <Row :gutter="10">
          <Col :span="12">名称：{{modalForm.id}}</Col>
          <Col :span="12">主机：{{modalForm.host}}</Col>
          <Col :span="12">环境：{{modalForm.environmentName}}</Col>
          <Col :span="12">创建时间：{{modalForm.creationTimestamp}}</Col>
        </Row>
      </div>
      <h4 class="zl-title">路径列表</h4>
      <Table :columns="columns" :data="modalForm.paths"></Table>
    </div>

  </div>
</template>
<script type="text/javascript">
import Fetch from '@/api/request'
export default {
  data() {
    return {
      loading: true,
      modalForm: {
      },
      modalVisible: false,
      columns: [
        {
          type: 'index',
          width: 60
        }, {
          title: '路径',
          key: 'path'
        }, {
          title: '服务',
          render: (h, params) => {
            return h('span', {
              class: 'zl-link',
              on: {
                click: () => {
                  this.goService(params.row)
                }
              }
            }, params.row.serviceId)
          }
        }, {
          title: '端口',
          key: 'servicePort'
        }
      ]
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 获取初始值
    init() {
      Fetch.get({
        url: '/api/environments/' + this.$route.params.environmentId + '/ingresses/' + this.$route.params.accessId,
        done: () => {
          this.loading = false
        }
      }).then((res) => {
        this.modalForm = res.data
        this.modalForm.environmentName = JSON.parse(localStorage.getItem('envionmentSelect')).environmentName
      })
    },
    // 去服务详情页面
    goService(access) {
      Fetch.get({
        url: '/api/environments/' + this.$route.params.environmentId + '/groups/getByServiceId/' + access.serviceId
      }).then((res) => {
        localStorage.setItem('groupName', res.data.name)
        this.$router.push('/home/environment/' + this.$route.params.environmentId + '/info/' + res.data.id + '/' + access.serviceId)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.modal-card {
  padding: 10px 20px;
  font-size: 14px;
  .zl-title {
    margin-top: 10px;
  }
  .modal-item {
    padding-left: 15px;
  }
  .ivu-col {
    padding-bottom: 8px;
    padding-top: 6px;
  }
}
</style>
